<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-06-07 20:18:43
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-07 21:52:59
 * @FilePath: \blogfastapi\frontend_blog\src\views\AboutEdit.vue
-->
<template>
  <div class="about-editor">
    <el-form :model="aboutForm" 
    status-icon 
    label-position="left"
     ref="aboutForm"
     label-width="6rem" 
     :modal-append-to-body="true"
     class="aboutForm"
     >
    <el-form-item label-width="0px" prop="content_md" :rules="[{required: true}]">
        <mavonEditor ref="md"  class="md" minHeight="600px"></mavonEditor>
      </el-form-item>
    <el-form-item class="about-submit-prop btn" label-width="0">
 		<el-button class="submit-btn" 
       type="danger"
       size="medium"
       :disabled="disabled"
       :loading="loading"
       @click="submitAboutForm('aboutForm')" 
    >{{submitBtnText}}</el-button>
 	</el-form-item>

    </el-form>
  </div>
</template>

<script>
import mavonEditor from 'components/MavonEditor';
import { fetchAbout,editAbout,deleteFile } from 'api';
export default {
  data(){
    
    return{
      aboutForm:{
          content_md:"",
          content:"",
      },
      imgUploadUrl: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API : process.env.VUE_APP_API_DEV + "/file/upload",
      submitBtnType : "danger",
      submitBtnText: "提交关于",
      disabled: false,
      loading: false,
      
      }
  },

  components: {
    mavonEditor
  },

  methods:{

    queryAbout(){
    let params={id:1}
		fetchAbout(params).then(res=>{
			this.aboutForm.content_md = res.data.content_md
			this.$refs.md.content = res.data.content_md
			this.$refs.md.html = res.data.content
		}).catch(err=>{
				console.log("queryAbout: ",err)
		})

    },
    //初始化数据
   initData(){
    this.queryAbout();
   },
  submitting(){
   this.submitBtnText="提交中...";
   this.disabled = true;
   this.loading = true;
  },
  initSubmitBtn(){
    this.submitBtnText="提交关于";
    this.disabled = false;
    this.loading = false;
  },
  myNotify(type,text){
        this.$notify({
        position: 'top-left',//左上方显示
        type:type,
        duration:2000, //显示3秒自动消失
        showClose:false, //不显示关闭按钮
        message:text, //显示的消息
        offset:100, //到顶部的偏移量
      })
  },
  //重置表单
  resetForm(formName) {
    this.$refs[formName].resetFields();
    this.$refs.md.content="";
    this.$refs.md.html="";
  },
  //提交更新关于
  submitAboutForm(formName){
    this.$refs[formName].model.content_md = this.$refs.md.content
    this.$refs[formName].model.content = this.$refs.md.html
    this.$refs[formName].model.id = 1   
    this.$refs[formName].validate((valid)=>{
    if(valid){
    this.submitting()
    editAbout(this.$refs[formName].model).then(res=>{
        
    this.myNotify('success','提交成功');
    this.$router.push('/about');
    this.resetForm(formName);
    
    }).catch(err=>{
      setTimeout(()=>{
        this.myNotify('error','提交失败');
        this.initSubmitBtn();
      },2000)
      console.log("addabout: " + err)
    })
    }
    else{
      return false
    }
    });
  },
  handleSuccess(res, file) {
    if (res.data && res.data.url){
        // this.filelist = [{name:res.data.alt,url:res.data.url}]
        this.aboutForm.img_link = res.data.url
        // console.log(this.aboutForm.img_link)
    }
  },
  handleRemove(file) {
    let params={
      path:this.aboutForm.img_link
    }
    // console.log(file)
    deleteFile(params).then(res=>{
    this.aboutForm.img_link = "";
    // console.log("deleteFile：",res)
    }).catch(err=>{
    // this.$message.error("删除失败");
    this.$notify({
        position: 'top-left',//左上方显示
        type:"error",
        duration:3000, //显示3秒自动消失
        showClose:false, //不显示关闭按钮
        message:`删除${file.name}失败`, //显示的消息
        offset:100, //到顶部的偏移量
      })
    console.log("deleteFile：",err)
    })
    // console.log(file, fileList);
  },

  handleExceed(files, fileList) {
        this.$message.warning("当前限制选择 1 个文件");
  },
  beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
  }

},

  mounted(){
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
.about-editor{
  padding: 0 10px;
}
.about-submit-prop{
    text-align: center;
}
.submit-btn{
  margin: 0 2rem;
}

</style>